<template>
  <div class="hello">
    <m-header modile-title="签名" go-back="true"></m-header>
    <button type="" v-on:click="clear">清除</button>
    <button v-on:click="save">保存</button>
    <canvas id="canvas" width="415" height="200">Canvas画板</canvas>
    <!--显示签名保存结果-->
    <img v-bind:src="url" alt="">
  </div>

</template>

<script>
  import mHeader from '../../../components/header'

  var draw;
  var preHandler = function (e) {
    e.preventDefault();
  }

  class Draw { // 暴露出一个canvas画布
    constructor(el) {
      this.el = el
      this.canvas = document.getElementById(this.el);
      this.cxt = this.canvas.getContext('2d');
      this.stage_info = canvas.getBoundingClientRect(); // 获取画布的位置
      this.path = { // 绘制路径的起始点都是0
        beginX: 0,
        beginY: 0,
        endX: 0,
        endY: 0
      }
    }
    // touchstart touchmove touchend 移动端设备触发事件
    init(btn) { // 初始化绘制的时的起始位置
      var that = this;
      this.canvas.addEventListener('touchstart', function (event) {
        document.addEventListener('touchstart', preHandler, false);
        that.drawBegin(event)
      });
      this.canvas.addEventListener('touchend', function (event) {
        document.addEventListener('touchend', preHandler, false);
        that.drawEnd(event)

      });
      this.clear(btn)
    }

    drawBegin(e) { // 开始绘制时触碰的第一个点
      var that = this;
      window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty();
      this.cxt.strokeStyle = "#fbf688";// 绘制线条的颜色
      this.cxt.beginPath(); // 开始绘制
      this.cxt.moveTo( // 移动画笔
        e.changedTouches[0].clientX - this.stage_info.left,
        e.changedTouches[0].clientY - this.stage_info.top
      );
      this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left;
      this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top;
      canvas.addEventListener("touchmove", function () {
        that.drawing(event)
      })
    }

    drawing(e) { // 绘制中
      this.cxt.lineTo(
        e.changedTouches[0].clientX - this.stage_info.left,
        e.changedTouches[0].clientY - this.stage_info.top
      );
      this.path.endX = e.changedTouches[0].clientX - this.stage_info.left;
      this.path.endY = e.changedTouches[0].clientY - this.stage_info.top;
      this.cxt.stroke()
    }

    drawEnd() { // 绘制后的最后一点
      document.removeEventListener('touchstart', preHandler, false);
      document.removeEventListener('touchend', preHandler, false);
      document.removeEventListener('touchmove', preHandler, false);
      //canvas.ontouchmove = canvas.ontouchend = null
    }

    clear() {
      this.cxt.clearRect(0, 0, 415, 200) // 清除画布
    }

    save() {
      return canvas.toDataURL("image/png") // 将图片转为dataURL(base64)
    }
  }

  export default {
    data() {
      return {
        url: ""
      }
    },
    mounted() {
      draw = new Draw('canvas');
      draw.init();
    },
    methods: {
      clear: function () {
        draw.clear();
      },
      save: function () {
        var data = draw.save();
        this.url = data;
        console.log(data)
      },

      mutate(word) {
        this.$emit("input", word);
      }
    },
    components: {
      mHeader
    }
  }
</script>
<style lang="scss" scoped>
  .hello{
    padding-top: 50px;
    #canvas {
      background: #000000;
    }
  }
</style>
